<template>
  <view>
    <view class="map">
      <map
        id="map_container"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        enable-3D="false"
        show-compass="false"
        enable-overlooking="false"
        :enable-satellite="false"
        :enable-traffic="false"
        :show-location="true"
        circles="circles"
        scale="8"
        @callouttap="tap"
      />
    </view>
    <div class="distances">
      <u-row>
        <u-col span="10">
          <u-slider
            v-model="distance"
            min="0"
            max="100"
            showValue
            @change="getnewnear"
          >
          </u-slider>
        </u-col>
        <u-col span="2">
          <text>公里</text>
        </u-col>
      </u-row>
    </div>
    <u-popup :show="notification" mode="bottom" @close="guanbi">
      <view>
        <u-cell-group>
          <u-cell icon="account" title="姓名:" :value="names"></u-cell>
          <u-cell
            icon="car"
            title="车牌号:"
            :value="`${carNumber.toUpperCase()}`"
          ></u-cell>
          <u-cell icon="list" title="车型:" :value="style"></u-cell>
          <u-cell icon="list" title="车长:" :value="length"></u-cell>
          <u-cell icon="list" title="载重:" :value="`${load}T`"></u-cell>
          <u-cell
            icon="phone"
            title="电话:"
            :value="nowmobile"
            @click="bohao(nowmobile)"
          ></u-cell>
        </u-cell-group>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  SetUserLocation,
  GetNearDriver,
  GetUserById,
} from "@/public/Api/update.js";
import { setValue, getValue } from "@/public/storeage/index.js";

export default {
  data() {
    return {
      id: "",
      mobiles: [],
      nowmobile: "",
      notification: false,
      amapPlugin: null,
      latitude: 39.899,
      longitude: 116.39742,
      key: "e9f1231c3e04f846432856dafa4e0a97",
      distance: 2,
      nowLocation: "",
      ponts: [],
      markers: [],
      names: "",
      carNumber: "",
      length: "",
      load: "",
      style: "",
      circles: [
        {
          //在地图上显示圆
          latitude: 0,
          longitude: 0,
          radius: 2000, //半径
          strokeWidth: 0, //描边的宽度
        },
      ],
    };
  },
  onLoad() {
    this.getloc();
  },
  methods: {
    guanbi() {
      this.notification = false;
    },
    async getloc() {
      // 授权成功后，调用getLocation选择信息
      uni.getLocation({
        type: "gcj02",
        isHighAccuracy: true,
        geocode: true,
        success: (res) => {
          this.circles[0].latitude = res.latitude;
          this.circles[0].longitude = res.longitude;
          this.latitude = res.latitude;
          this.longitude = res.longitude;
          var location = `${res.latitude},${res.longitude}`;
          this.nowLocation = location;
          this.GetNearDriver(this.nowLocation);
        },
      });
    },
    getnewnear() {
      this.circles[0].radius = this.distance * 1000;
      this.GetNearDriver(this.nowLocation);
    },
    async GetNearDriver(location) {
      console.log(location);
      var from = location;
      var distance = this.distance * 1000;
      try {
        const { data: res } = await GetNearDriver({
          from,
          distance,
        });

        this.ponts = res.result;
        var ids = 1;
        this.markers = [];
        this.ponts.forEach((item, index) => {
          this.markers.push({
            id: ids,
            names: item.name,
            telphone: item.telphone,
            userId: item.userId,
            latitude: item.location.split(",")[0],
            longitude: item.location.split(",")[1],
            width: 30,
            height: 30,
            iconPath: "../../static/iocn56.png", // 显示的图标
            callout: {
              //自定义标记点上方的气泡窗口 点击有效
              content: `${item.name} ${item.length} ${item.load}T  ${item.style}`, //文本
              color: "#ffffff", //文字颜色
              fontSize: 14, //文本大小
              borderRadius: 8, //边框圆角
              borderWidth: "0",
              bgColor: "#EF4D3D", //背景颜色
              display: "ALWAYS", //常显
              padding: 5,
              name: "callout",
            },
          });
          ids += 1;
          this.mobiles.push({
            mobile: item.telphone,
          });
        });
      } catch (e) {}
    },
    tap(e) {
      console.log("点击", this.markers);
      this.nowmobile = this.markers[e.markerId - 1].telphone;
      this.id = this.markers[e.markerId - 1].userId;
      this.names = this.markers[e.markerId - 1].names;
      this.notification = true;
      this.GetUserById();
    },

    // 拨打电话
    bohao(item) {
      console.log(item, "new");
      let phone = item;
      uni.makePhoneCall({
        phoneNumber: phone,
        success: (res) => {
          this.CallRecordCreate();
        },
        fail: (res) => {
          console.log("打电话失败了");
        },
      });
    },
    async GetUserById() {
      var id = this.id;
      try {
        const { data: res } = await GetUserById({
          id,
        });
        console.log(res, "id");
        this.carNumber = res.result.truck.carNumber;
        this.length = res.result.truck.length;
        this.load = res.result.truck.load;
        this.style = res.result.truck.style;
      } catch (e) {}
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  padding: 15upx;
}

.map {
  position: fixed;
  top: 0;
  bottom: 0upx;
  left: 0upx;
  right: 0;
}

#map_container {
  width: 100%;
  height: 100%;
}

.distances {
  border-radius: 17.52upx;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
    1.75upx 1.75upx 7.01upx 0px #cccccc;
  align-items: center;
  z-index: 999;
  position: fixed;
  top: 10upx;
  left: 6upx;
  right: 6upx;
  background-color: #fff;
}
</style>
